import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

console.log('【React子应用】初始化开始')

let root: ReactDOM.Root | null = null

// 渲染函数
function mount() {
  const container = document.getElementById('root')
  if (!container) {
    console.log('【React子应用】找不到挂载点')
    return false
  }

  try {
    // 如果已经有实例，先卸载
    if (root) {
      console.log('【React子应用】清理已存在的实例')
      root.unmount()
      root = null
    }

    console.log('【React子应用】开始渲染')
    root = ReactDOM.createRoot(container)
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    )
    console.log('【React子应用】渲染完成')
    return true
  } catch (e) {
    console.error('【React子应用】渲染失败:', e)
    return false
  }
}

// 卸载函数
function unmount() {
  if (root) {
    console.log('【React子应用】执行卸载')
    try {
      root.unmount()
      root = null
      console.log('【React子应用】卸载完成')
      return true
    } catch (e) {
      console.error('【React子应用】卸载失败:', e)
      return false
    }
  }
  return true
}

// 注册微前端生命周期
// @ts-ignore
if (window.__MICRO_APP_ENVIRONMENT__) {
  console.log('【React子应用】运行在微前端环境')
  
  // @ts-ignore
  const appName = window.__MICRO_APP_NAME__ || 'react-app'
  const lifeCycles = {
    mount: () => {
      console.log('【React子应用】mount 生命周期触发')
      return mount()
    },
    unmount: () => {
      console.log('【React子应用】unmount 生命周期触发')
      return unmount()
    }
  }

  // 同时支持两种方式
  // @ts-ignore
  window[`micro-app-${appName}`] = lifeCycles
  window['mount'] = lifeCycles.mount
  window['unmount'] = lifeCycles.unmount

  // 主动执行首次渲染
  console.log('【React子应用】执行首次渲染')
  mount()
} else {
  console.log('【React子应用】独立运行')
  mount()
}

// 开发环境下的热更新支持
if (import.meta.hot) {
  import.meta.hot.accept()
}